<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/12/15
  Time: 10:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%String path = request.getContextPath()+"/";%>
<html>
<head>
    <base href="<%=path%>">
    <title>Title</title>
    <link href="static/css/bootstrap.min.css?v=3.3.7" rel="stylesheet" />
    <link href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
    <link href="static/js/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />

</head>
<style>
    #query ul li{
        display: inline-block;
        list-style: none;
        float:left;
        width:300px;
        margin-top:5px;
    }
    #query ul li input,select{
        width:200px;
        display:inline-block;
    }
</style>
<body style="background-color: gainsboro;overflow-x: hidden;">
<div class="container-fluid" style="padding: 0 28px;height: 100%;">
    <div class="row">
        <!--
        12列
        col-md-占用几列
        -->
        <div class="col-md-3" style="padding: 0px;">
            <div class="panel panel-default" style="margin-top: 10px;">
                <div class="panel-heading">
                    <h3 class="panel-title">组织机构
                        <div style="float:right">
                        <span class="glyphicon glyphicon-edit"></span>&nbsp;
                    <span class="glyphicon glyphicon-menu-up" id="exp" onclick="expand();" style="cursor: pointer"></span>&nbsp;
                        <span class="glyphicon glyphicon-refresh" onclick="initTree();"></span>&nbsp;</div>
                    </h3>
                </div>
                <div class="panel-body">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div id="query" class="row" style="background-color: white;height: 150px;border-radius: 10px;margin:10px 10px 10px 10px;padding: 10px;">
                <form id="queryForm">
                    <input id="deptId" type="hidden" name="deptId"/>
                <ul>
                    <li>
                      登录名称：  <input name="loginAccount" type="text" class="form-control" placeholder="登录名称">
                    </li>
                    <li>
                        手机号码：  <input name="mobile" type="text" class="form-control"  placeholder="手机号">
                    </li>
                    <li>
                        用户状态：
                        <select name="status" class="form-control" style="width: 200px;display: inline-block">
                            <option value="-1">--全部--</option>
                            <option value="0">启用</option>
                            <option value="1">禁用</option>
                        </select>
                    </li>
                    <li>
                        创建时间：  <input type="text" name="createDate" class="form-control"  style="width: 95px;" placeholder="开始时间">-
                        <input type="text" name="message" class="form-control"  placeholder="结束时间" style="width: 95px;">
                   </li>
                    <li>
                        <shiro:hasPermission name="user:query">
                            <button type="button" class="btn btn-primary" onclick="refresh();">筛选</button>

                        </shiro:hasPermission>
                       <button  class="btn btn-success" type="reset">重置</button>
                    </li>
                </ul>
                </form>
            </div>
            <div class="row" style="background-color: white;height: auto;border-radius: 10px;margin:10px 10px 10px 10px;padding: 5px;">
                <table id="table"
                ></table>
            </div>
            <div id="toolbar">
                <!--
                 if判断，当前登录的主体，如果包含有name规定的权限
                 返回true
                 -->
                <shiro:hasPermission name="user:add">
                    <button type="button" class="btn btn-primary" onclick="add()"><span class="glyphicon glyphicon-plus"></span> 新增</button>
                </shiro:hasPermission>
                <shiro:hasPermission name="user:deletes">
                    <button type="button" class="btn btn-danger" onclick="deletes();"><span class="glyphicon glyphicon-trash"></span>&nbsp;批量删除</button>

                </shiro:hasPermission>
                <shiro:hasPermission name="user:edit">
                    <button type="button" class="btn btn-primary" onclick="edit2()"><span class="glyphicon glyphicon-edit"></span>&nbsp;修改</button>


                </shiro:hasPermission>


            </div>
        </div>
    </div>
</div>
</body>
<script src="static/js/jquery.min.js?v=2.1.4"></script>
<script src="static/js/bootstrap.min.js?v=3.3.7"></script>
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="static/js/plugins/layer/layer.min.js"></script>
<script src="static/js/plugins/ztree/js/jquery.ztree.core.js"></script>
<script src="static/sofwin.js"></script>

<script>
    var zTreeObj;
    var flag =true
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        callback:{
          onClick:function(event,treeId,treeNode,clickFlag){
              $("#deptId").val(treeNode.id);
              refresh();
          }
        },
        data:{
            key:{
              name:'deptName'
            },
            simpleData:{
                enable: true,
                pIdKey:'parentId'
            }
        }
    };
    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    // var zNodes = [
    //     {name:"test1", open:true, children:[
    //             {name:"test1_1"}, {name:"test1_2"}]},
    //     {name:"test2", open:true, children:[
    //             {name:"test2_1"}, {name:"test2_2"}]}
    // ];
    var zNodes;

    $(document).ready(function(){
       initTree();
   });
    function initTree(){
        $.operator.get("dept/deptTtree",'',function(ret){
            zNodes = ret.result;
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            $("#exp").removeClass("glyphicon-menu-down");
            $("#exp").addClass("glyphicon-menu-up");
        });
    }

    function expand(){
        if(flag){
            flag = false;
            $("#exp").removeClass("glyphicon-menu-up");
            $("#exp").addClass("glyphicon-menu-down");
        }else{
            flag =true;
            $("#exp").removeClass("glyphicon-menu-down");
            $("#exp").addClass("glyphicon-menu-up");
        }
        zTreeObj.expandAll(flag);
    }
    var index;
    // 发送异步请求获取Json数组

    // columns:定义列
    // title: 定义列标题的
    // field:远程异步返回的数据中(json数组）
    // 数组中json对象的属性的属性名
    let columns=[{
        checkbox:true
    },{
        field: 'id',
        titleTooltip:'这是用户Id',
        title: '用户id',
        sortable:true
    }, {
        field: 'loginAccount',
        title: '登录名称',
        switchable:false
    },  {
        field: 'mobile',
        title: '手机号码'
    },{
        field: 'dept.deptName',
        title: '部门'
    },{
        title: '用户状态',
        formatter:function(value,row,index,field){
            if(row.status==0){
                return '<span class="label label-success">启用</span>';
            }
            return '<span class="label label-danger">禁用</span>';
        }

    },{
        field: 'createDate',
        title: '创建时间'
    },{
        field: 'email',
        title: '邮箱',
        visible:false
    },
        {
        title: '操作',
        formatter:function(value,row,index,field){
            let str="";
            <shiro:hasPermission name="user:delete">
                str+='        <button type="button" onclick="dele('+row.id+')" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span>&nbsp;删除</button>\n';
            </shiro:hasPermission>
            <shiro:hasPermission name="user:edit">
                str+='                <button type="button" class="btn btn-primary btn-sm" onclick="edit('+row.id+')"><span class="glyphicon glyphicon-edit" ></span>&nbsp;修改</button>';
            </shiro:hasPermission>
            return str;
        }
    }];
    $.initTable(columns,'user');

    function dele(id){
        layer.confirm("确认是否删除吗？",function(){
            $.operator.delete('user/dele/'+id,function(ret){
                if(ret.code==200){
                    this.refresh();
                }
                layer.msg(ret.message);
            });
        })

    }
    function deletes(){
        let objs=$("#table").bootstrapTable("getSelections");
        if(objs.length==0){
            layer.alert("请选择要删除的数据");
            return;
        }
        layer.confirm("确定要删除选中的"+objs.length+"条数据吗？",function(){
           let ids = new Array();
           for(let i=0;i<objs.length;i++){
               ids.push(objs[i].id);
           }
           $.operator.get('user/deletes',{ids:ids},function(ret){
               if(ret.code==200){
                   this.refresh();
               }
               layer.msg(ret.message);
           })
        });
    }
    function refresh(){
        $.refresh();
    }
    function edit2(){
        let objs=$("#table").bootstrapTable("getSelections");
        if(objs.length==0){
            layer.alert("请选择要修改的数据");
            return;
        }
        if(objs.length>1){
            layer.alert("请选择要一条需要修改数据");
            return;
        }
        edit(objs[0].id);
    }
    function edit(id){
        index = layer.open({
            type:2,
            content:'user/toEdit?id='+id,
            title:'用户修改',
            area:['500px','400px'],
            offset: 'auto',
            maxmin:true
        });
        layer.full(index);
    }
    function add(){
         index = layer.open({
            type:2,
            content:'user/toEdit',
            title:'用户新增',
            area:['500px','400px'],
            offset: 'auto',
            maxmin:true
        });
        layer.full(index);
    }
    function close(){
        layer.close(index);
    }
</script>

</html>
